<!--  -->
<template>
  <div class="warp">
    <!-- 课程特色 -->
    <div class="characteristic">
      <div class="title"></div>
      <div class="img-title">
        <div
          :class="swperIndex == index ? 'swperIndex' : ''"
          class="item-img"
          v-for="(item,index) in swpeTtitle1" 
          :key="item.id"
          @click="characteristic(index)"
        >
          <img :src="swperIndex == index ?  item.atveImg : item.imgUrl"/>
        </div>
      </div>
      <!-- 课程轮播图 -->
      <div class="carousel-list">
        <el-carousel
          @change="classChange"
          indicator-position="none" 
          arrow="nerver"
          ref="charaRef"
          :interval="carouInterval"
        >
          <el-carousel-item v-for="(j,k) in swpeTtitle1" :key="j.id">
           <img :src="j.imgCenter"/>
          </el-carousel-item>
        </el-carousel>
        <div class="backg-img"></div>
      </div>
    </div>

    <!-- 科学课程体系 -->
    <div class="science-system">
      <div class="title-img"></div>
      <div class="img-title">
        <img 
          :class="scienceIndex == index ? 'scienceIndex' : 'imgge'"
          class="imgge" 
          v-for="(item,index) in scienceList" 
          :key="item.id"
          :src="scienceIndex == index ?  item.iagActiv : item.imgUrl"
          @click="scienceTiele(index)"
        />
      </div>
      <div class="backg">
        <div class="item-center-img">
          <el-carousel
            @change="scienceChange"
            indicator-position="none" 
            arrow="nerver"
            ref="cardShow"
            :interval="scienceInterval"
          >
            <el-carousel-item v-for="(j,k) in scienceList" :key="j.id">
            <img :src="j.imgCenter"/>
            </el-carousel-item>
          </el-carousel>
        </div>
         <!-- 自定义左右箭头 -->
        <div class="arrow-left arrow" @click="clickLeft('prev')"><img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/arrow_left.png"/></div>
        <div class="arrow-right arrow" @click="clickLeft('next')"><img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/arrow_right.png"/></div>
      </div>
    </div>

    <!-- 点击联系老师 -->
    <div class="contact-teache"  @click="contactTeacher"> 
      <img  class="btn-img" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/contact_teacher.png"/>
    </div>
    <div class="good-reputation">
      <div class="praise-item-img">
        <img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/course_praise.png"/>
      </div>
    </div>

    <!-- 贴心服务，严选师资 -->
    <div class="saeve-teache">
      <div class="title"></div>
      <div class="img-list">
        <img
          class="item-img"
          v-for="(item,index) in saeveList"
          :key="item.id"
          :src="item.imgUrl"
        />
      </div>
    </div>

    <!-- 点击联系老师 -->
    <div class="contact-teache" @click="contactTeacher"> 
      <img class="btn-img" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/contact_teacher.png"/>
    </div>
    <div class="explain">说明：试听课奖励是根据公司采购的奖品随机发放的。因为试听课人数是动态变化的，无法与公司采购完全相匹配。</div>

    <!-- 底部信息 -->
    <div class="footer">
      <div class="item-concut">
        <span class="my-title">关于我们</span>
        <span> Copyright @ 2021深圳市锦鳞技术有限公司 版权所有</span>
      </div>
      <div class="icpcode margin-top-bottom">
        <a 
          target="_blank"  
          href="https://beian.miit.gov.cn" 
          class="secuity-name-img text-color"
        >
          粤ICP备2021117518号
        </a>
          <a 
          target="_blank"
          :href="business"
          class="secuity-name-img"
        >
        增值电信业务经营许可证：粤B2-20211536
        </a>
      </div>
      <div class="icpcode">
        <a 
          target="_blank" 
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030902002963" 
          class="secuity-name-img text-color"
        >
        粤网公安备44030902002963号
        <div class="bian-logo"><img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/bian.png"/></div>
        </a>
        <div>公司地址：深圳市宝安区财富港国际中心D座</div>
      </div>
    </div>

    <!-- 弹窗 -->
    <div class="add-teacher-dialog-box">
      <el-dialog :visible.sync="teacherDialog" width="800px" :show-close="false" class="add-teacher-dialog" :close-on-click-modal="false">
        <div class="teacher-dialog" @click="teacherDialog= false">
          <i class="el-icon-circle-close" style="font-size: 40px; color: #fff"></i>
        </div>
        <div class="teacher-main">
          <!-- <div class="present-carousel">
            <el-carousel
              @change="scienceChange"
              indicator-position="none" 
              arrow="nerver"
              ref="cardShow"
              :interval="scienceInterval"
            >
            <el-carousel-item v-for="(j,k) in scienceList" :key="j.id">
            <img :src="j.imgCenter"/>
            </el-carousel-item>
          </el-carousel>
          </div> -->
        </div>
      </el-dialog>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
      scienceInterval: 3000, // 科学课程体系切换的时间
      carouInterval: 3000, // 课程特色切换时间
      business:require('../assets/business.jpg'),
      teacherDialog: false, // 添加老师弹窗
      swperIndex: 0, // 课程特色下表
      scienceIndex: 0, // 科学课程体系下标
      swpeTtitle1: [
        { 
          id: 1, 
          imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature2.png',
          imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_b_1.png', 
          atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_a_1.png'
        },
        { 
          id: 2, 
          imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature3.png',
          imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_b_2.png',
          atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_a_2.png'
        },
        { 
          id: 3, 
          imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature4.png',
          imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_b_3.png.png', 
          atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_a_3.png'
        },
        { 
          id: 4, 
          imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature5.png',
          imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_b_4.png', 
          atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_a_4.png'
        },
        { 
          id: 5, 
          imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature6.png',
          imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_b_5.png', 
          atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_a_5.png'
        },

      ],
      scienceList: [
        { 
          id: 1, 
          imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/science_back1.png',
          imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/science_b1.png',
          iagActiv: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/science_a1.png'
        },
         { 
          id: 2, 
          imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/science_back2.png',
          imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/science_b2.png',
          iagActiv: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/science_a2.png'
        }
      ],
      saeveList: [
        { id: 1, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/service1.png'},
        { id: 2, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/service2.png'},
        { id: 3, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/service3.png'}

      ]
    }
  },

  computed: {},

  mounted() {},

  methods: {
    // 点击科学课程体系标题
    scienceTiele(index) {
      this.$refs.cardShow.setActiveItem(index)
      this.scienceIndex = index
      this.scienceInterval = 10000
      setTimeout(()=>{
        this.scienceInterval = 3000
      },10000)
    },
    // 点击课程特色标题
    characteristic(index) {
      this.$refs.charaRef.setActiveItem(index)
      this.swperIndex = index
      this.carouInterval = 10000
      setTimeout(()=>{
        this.carouInterval = 3000
      },10000)
    },
    // 联系老师
    contactTeacher() {
      console.log( this.teacherDialog)
      this.teacherDialog = true
      console.log( this.teacherDialog)
    },
    // 左箭头
    clickLeft(val) {
       if(val === 'next') {
        this.$refs.cardShow.next()
      } else {
        this.$refs.cardShow.prev()
      }
    },
     // 课程特色轮播图change事件
    classChange(e) {
      this.swperIndex = e
    },
    // 科学课程体系change事件
    scienceChange(e) {
      this.scienceIndex = e
    }
  }
}

</script>
<style lang='scss' scoped>
  .warp{
    width:100%;
    height: auto;
    background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/putin_banner_v2.jpg');
     background-repeat:repeat-y;
     background-size:100% 100%;
    img{
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    // 课程特色
    .characteristic{
      position: relative;
      z-index:9;
      padding-top:1036px;
      .title{
        width: 602px;
        height: 126px;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation_title_1.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
         margin: auto;
      }
      .img-title{
        display: flex;
        justify-content: center;
        align-items: center;
        .item-img{
          width: 242px;
          height: 73px;
          margin: 35px 21px 21px 21px;
        }
        .swperIndex{
          width: 260px;
          height: 64px;
        }
      }

      .carousel-list{
        width: 1140px;
        height: 640px;
        margin: auto;
        position: relative;
        ::v-deep .el-carousel__container{
          height: 640px !important;
        }
        .backg-img{
          position: absolute;
          bottom: -24px;
          right: -24px;
          width: 976px;
          height: 530px;
           background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/rotation6.png');
          background-repeat:repeat-y;
          background-size:100% 100%;
        }
      }
    }
    ::v-deep .el-carousel__arrow{
      display: none !important;
    }
    // 科学课程体系
    .science-system{
      position: relative;
      z-index:9;
      margin-top: 57px;
      padding: 0 283px;
      .title-img{
        width: 602px;
        height: 126px;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/science_title.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
         margin: auto;
      }
      .img-title{
        display: flex;
        margin: 32px 0 -11px -133px;;
        justify-content: center;
        align-items: flex-end;
        .imgge{
          width: 342px;
          height: 50px;
          margin-top: 6px;
        }
        .scienceIndex{
          width: 340px;
          height: 56px;
        }
      }
      .backg{
        width: 1356px;
        height: 870px;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/science_backg.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
         margin: auto;
         position: relative;
         .item-center-img{
           width: 1094px;
           height: 776px;
           position: absolute;
           top: 41px;
           right: 32px;
          ::v-deep .el-carousel__container{
            height: 776px !important;
          }
         }
         .arrow{
           position: absolute;
           top: 46%;
           width: 72px;
           height: 72px;
         }
         .arrow:hover{
           -moz-transform: scale(1.1);
            -webkit-transform: scale(1.1);
            -o-transform: scale(1.1);
         }
         .arrow-left{
           left: -85px;
         }
          .arrow-right{
            right: -85px;
          } 
      }
    }

    // 联系老师
    .contact-teache{
      padding: 0 283px;
      margin-top: 57px;
      .btn-img{
        width: 100%;
        height: 120px;
      }
    }
    .contact-teache:active{
      -moz-transform: scale(1.02);
      -webkit-transform: scale(1.02);
      -o-transform: scale(1.02);
    }
    .good-reputation{
      margin-top: 28px;
      padding: 0 283px;
      .praise-item-img{
        width: 100%;
        height: 800px;
      }
    }

    //  贴心服务，严选师资
    .saeve-teache{
      position: relative;
      z-index:9;
      margin-top: 57px;
      .title{
        width: 602px;
        height: 126px;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/service_title.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
         margin: auto;
      }
      .img-list{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 24px 0 40px 0;
        .item-img{
          width: 240px;
          height: 360px;
          margin: 0 60px;
        }
        .item-img:hover{
          -moz-transform: scale(1.06);
          -webkit-transform: scale(1.06);
          -o-transform: scale(1.06);
        }
      }
    }

    .explain{
      font-family: 'Source Han Serif CN';
      font-style: normal;
      font-weight: 700;
      font-size: 18px;
      color: #25C4FF;
      line-height: 26px;
      text-align: center;
      margin: 10px 0;
    }

    // 底部信息
    .footer {
      width: 100%;
      height: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background:#343333;
      .item-concut {
        font-size: 12px;
        color: #ffffff;
        .my-title{
          margin-right: 16px;
          cursor:default;
        }
      }
      .icpcode{
        color: #999999;
        font-size: 12px;
        display: flex;
        align-items: center;
        .text-color{
          color: #fff !important;
        }
        .secuity-name-img{
          margin-right: 16px;
          text-decoration:none;
          color: #999999;
          display: flex;
          align-items: center;
          .bian-logo {
            width: 20px;
            height: 20px;
        }
      }
    }
    .margin-top-bottom{
      margin: 4px 0;
    }
  }

  // 弹窗
   .add-teacher-dialog-box{
        // 添加老师弹窗
    .teacher-dialog{
      position: absolute;
      top: -30px;
      right: -45px;
    }
    .add-teacher-dialog ::v-deep .el-dialog__body{
      padding: 0 !important;
      height: 360px !important;
    }
    ::v-deep  .el-dialog__header{
      padding: 0 !important;
    }
    ::v-deep .el-dialog{
      background: rgba(255,255,255,0) !important;
    }
    .teacher-main{
      width: 100%;
      height: 360px;
      background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/pc_v2/dialog_teacher.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .present-carousel{
        width: 150px;
        height: 100px;
      }
    }
  }
}
</style>
